<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给罗庆的心动告白</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #fce4ec;
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: background-color 2s ease;
        }
        
        .container {
            text-align: center;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            color: #e91e63;
            font-size: 2.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transform: translateY(-20px);
            animation: fadeIn 1s forwards 0.5s;
        }
        
        .heart {
            font-size: 100px;
            color: #e91e63;
            display: inline-block;
            animation: heartbeat 1.5s infinite;
            margin: 20px 0;
            text-shadow: 0 0 20px rgba(233, 30, 99, 0.5);
        }
        
        p {
            font-size: 1.2rem;
            line-height: 1.8;
            color: #555;
            margin-bottom: 25px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 1s forwards 1s;
        }
        
        .special {
            font-weight: bold;
            color: #e91e63;
        }
        
        .btn {
            background-color: #e91e63;
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 1.1rem;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(233, 30, 99, 0.3);
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 1s forwards 1.5s;
        }
        
        .btn:hover {
            background-color: #c2185b;
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(233, 30, 99, 0.4);
        }
        
        .flowers {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .flower {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #e91e63;
            opacity: 0.7;
            border-radius: 50%;
        }
        
        .message {
            display: none;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            max-width: 90%;
            width: 500px;
            position: relative;
            animation: popup 0.7s forwards;
        }
        
        .close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 20px;
            cursor: pointer;
            color: #999;
        }
        
        @keyframes heartbeat {
            0% { transform: scale(1); }
            5% { transform: scale(1.2); }
            10% { transform: scale(1.1); }
            15% { transform: scale(1.3); }
            50% { transform: scale(1); }
            100% { transform: scale(1); }
        }
        
        @keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes popup {
            0% { transform: scale(0.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        @keyframes fall {
            0% { transform: translateY(-100px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(calc(100vh + 50px)) rotate(360deg); opacity: 0.7; }
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>亲爱的罗庆</h1>
        <div class="heart">❤</div>
        <p>每一次与你相遇，都是我生命中最美好的时刻。你的微笑如同阳光，温暖了我的世界。</p>
        <p>在这个特别的时刻，我想告诉你：</p>
        <p>我喜欢你，<span class="special">非常喜欢你</span>。</p>
        <button class="btn" id="confession">点击查看我的心意</button>
    </div>
    
    <div class="message" id="message">
        <span class="close" id="close">×</span>
        <h2 style="color: #e91e63; margin-bottom: 20px;">罗庆，我想对你说</h2>
        <p style="opacity: 1; transform: none;">从懵懂童年初见你的那一刻，你的气质便如一缕清风，悄然吹入我的心扉。命运的齿轮再次转动，让我有幸与你重逢，那一刻，我的心如小鹿般雀跃。时光流转，每一次相处都如珍珠般串联起我对你的了解，每一次凝视你的眼眸，我都愈发笃定：你就是那个在我生命长河中，一直寻觅的灵魂伴侣，是我千帆过尽后最想靠岸的港湾。</p>
        <p style="opacity: 1; transform: none;">我喜欢你认真时的样子，喜欢你开心时的笑容，喜欢你所有的一切。</p>
        <p style="opacity: 1; transform: none;">希望你能接受我的心意，让我有机会走进你的世界，陪你一起看更美的风景。</p>
        <p style="opacity: 1; transform: none; font-weight: bold; color: #e91e63; margin-top: 20px;">愿你每天都能收获快乐，像你带给我的那样多。</p>
        <div style="margin-top: 30px;">
            <button class="btn" id="accept" style="margin-right: 20px; opacity: 1; transform: none; background-color: #4caf50;">接受表白</button>
            <button class="btn" id="consider" style="opacity: 1; transform: none; background-color: #ff9800;">再考虑一下</button>
        </div>
    </div>
    
    <div class="flowers" id="flowers"></div>
    
    <script>
        // 创建花瓣效果
        const flowers = document.getElementById('flowers');
        const colors = ['#e91e63', '#f48fb1', '#f8bbd0', '#fce4ec'];
        
        function createFlower() {
            const flower = document.createElement('div');
            flower.className = 'flower';
            flower.style.left = Math.random() * 100 + '%';
            flower.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            flower.style.width = (10 + Math.random() * 20) + 'px';
            flower.style.height = flower.style.width;
            
            const duration = 5 + Math.random() * 5;
            flower.style.animation = `fall ${duration}s linear forwards`;
            
            flowers.appendChild(flower);
            
            setTimeout(() => {
                flower.remove();
            }, duration * 1000);
        }
        
        // 每隔一段时间创建一个花瓣
        setInterval(createFlower, 300);
        
        // 点击显示告白信息
        document.getElementById('confession').addEventListener('click', function() {
            document.getElementById('message').style.display = 'block';
            document.querySelector('.container').classList.add('hidden');
        });
        
        // 关闭告白信息
        document.getElementById('close').addEventListener('click', function() {
            document.getElementById('message').style.display = 'none';
            document.querySelector('.container').classList.remove('hidden');
        });
        
        // 接受表白
        document.getElementById('accept').addEventListener('click', function() {
            alert('谢谢你接受我的心意！❤ 未来的日子里，让我们一起创造更多美好的回忆！');
            document.body.style.backgroundColor = '#e8f5e9';
            for(let i = 0; i < 30; i++) {
                setTimeout(createFlower, i * 100);
            }
        });
        
        // 再考虑一下
        document.getElementById('consider').addEventListener('click', function() {
            const responses = [
                "没关系，我会耐心等待~",
                "我的心意依然不变！",
                "希望你能再认真考虑一下，好吗？",
                "我会继续努力，直到打动你的心！"
            ];
            alert(responses[Math.floor(Math.random() * responses.length)]);
        });
    </script>
</body>
</html>